{% extends "base.html" %}
{% block content %}
<style>
    hr {
    margin-top: 5px;
    margin-bottom: 5px;
    border: 0;
    border-top: 1px solid #d5d5d5;
}
</style>
        <div class="row">
            <div class="col-xs-6">
                <font face="youyuan" size="4">标题</font>
            </div>
            <div class="col-xs-3">
                <font face="youyuan" size="4">热度</font><!-- <i class="fa fa-heart-o fa-fw" aria-hidden="true" style="color: red;"></i> -->
            </div>
            <div class="col-xs-3">
                <font face="youyuan" size="4">发布时间</font>
            </div>
        </div>
        <hr>
        {% for post in posts %}

        <div class="row">
            <div class="col-xs-6">
                <div class="news-list-item">
                    <a class="title" href="{% url 'show_blog' post.id %}">
                        <h5>{{ post.title }}</h5>
                    </a>
                    {% for i in lablelist %}
                        {% ifequal forloop.counter forloop.parentloop.counter %}
                            {% for j in i %}
                                {% ifequal j '电子' %}
                                    <span class="label label-warning">{{j}}</span>
                                {% endifequal %}
                                {% ifequal j '欧美' %}
                                    <span class="label label-default">{{j}}</span>
                                {% endifequal %}
                                {% ifequal j '纯音乐' %}
                                    <span class="label label-info">{{j}}</span>
                                {% endifequal %}
                                {% ifequal j '中文' %}
                                    <span class="label label-primary">{{j}}</span>
                                {% endifequal %}
                                {% ifequal j '古风' %}
                                    <span class="label label-success">{{j}}</span>
                                {% endifequal %}
                                {% ifequal j '日韩' %}
                                    <span class="label label-danger">{{j}}</span>
                                {% endifequal %}
                                {% ifequal j 'VOCALOID' %}
                                    <span class="label label-selfset">{{j}}</span>
                                {% endifequal %}
                            {% endfor %}
                        {% endifequal %}
                    {% endfor %}
                    <!--<small>{% autoescape off %}{{ post.content|truncatewords_html:5 }}{% endautoescape %}</small>-->
                </div>
            </div>
            <div class="col-xs-3">
                <h6>
                    <div style="float: left;width:10%;  margin-top: 1px;">
                        <i class="fa fa-heart-o fa-fw" aria-hidden="true" style="color: red;"></i>
                    </div>
                    <div style="float: left;width: 88%; margin-top: 3px;" >
                        <div class="progress" style="height: 7px;width: 170px;">
                            <div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="10" style="width:{{ post.popular }}%;color:#ea4c89">
                                <span class="sr-only">10% Complete (danger)</span>
                            </div>
                        </div>
                    </div>
                </h6>
            </div>
            <div class="col-xs-3">
                <div class="news-list-item">
                    <h6><span class="fa fa-info-circle info2">{{ post.creatdate|date:"Y年n月d日-H:i" }}</span></h6>
                </div>
            </div>
        </div>
        <hr>
        {% endfor%}
        <nav aria-label="Page navigation" style="text-align: left">
            <ul class="pagination">
                {% if posts.has_previous %}
                <li>
                    <a href="?page={{ posts.previous_page_number }}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                {% else %}
                    <li class="disable">
                    <a aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                    </li>
                {% endif %}
                {% for i in numlist %}
                    {% if i == posts.number %}
                        <li class="active"><a href="?page={{i}}">{{i}}</a></li>
                    {% else %}
                        <li><a href="?page={{i}}">{{i}}</a></li>
                    {% endif %}
                {% endfor %}
                {% if posts.has_next %}
                    <li>
                        <a href="?page={{ posts.next_page_number }}" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                {% else %}
                    <li class="disable">
                        <a aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                {% endif %}
            </ul>
        </nav>
{% endblock %}